<template>
  <div>
    <h2 style="font-size: 0.3rem;padding: 0.2rem 0">推荐歌单</h2>
    <!--  推荐歌单-->
    <div class="swiper2" style="height: 3rem;width: 1.6rem" >
      <div class="swiper-wrapper" style="height: 2.2rem;">
        <div class="swiper-slide" style="padding-right: 0.2rem;display: flex;flex-direction: column; "
             v-for="song in Songlist.PlayLits.result" :key="song.id" v-if=" Songlist.show">
          <img :src="song.picUrl" alt="" @click="toPlayList(song.id)">
          <div class="VideoView">
            <div class="play">
              <svg class="icon playIcon" aria-hidden="true" style="font-size: 0.2rem;">
                <use xlink:href="#icon-z24gl-play"></use>
              </svg>
              <span
                  class="playNumber">{{ song.playCount > 10000 ? song.playCount.toString().slice(0, song.playCount.toString().length - 4) + '万' : song.playCount }}</span>
            </div>
          </div>
          <div class="title">{{ song.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import {onMounted, reactive, watch} from "vue";
import {GoodsPlaylist} from "../../../HTTP/api";
import {useRouter} from "vue-router";

export default {
  name: "RecommendPlaylist",
  // mounted() {
  //   new Swiper('.swiper2', {
  //     // 如果需要分页器
  //   })
  // },
  setup() {
    const router=useRouter()
    let Songlist = reactive({
      PlayLits: '',
      show: false
    })
    const toPlayList=(id)=>{
      router.push({name:'PlayList',query:{id:id}})
    }
    watch(Songlist, () => {
      console.log("变化l")
      new Swiper('.swiper2', {
        // effect:'coverflow',
        observer: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播
        observeParents: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播
        // 如果需要分页器
      })
    })
    onMounted(async () => {
      Songlist.PlayLits = await GoodsPlaylist()
      Songlist.show = true
    })
    return {
      Songlist,
      toPlayList
    }
  }
}
</script>
<style scoped>
.swiper2 img {
  /*width: 100%;*/
  /*width: 1.6rem;*/
  height: 2rem;
  border-radius: 0.2rem;
  position: relative;
}

.title {
  font-size: 0.16rem;
}

.VideoView {
  position: absolute;
  width: 0.8rem;
  height: 0.3rem;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 0.1rem;
  right: 0.3rem;
  top: 0.1rem;
}

.playIcon {
  color: blue;
}

.playNumber {
  font-size: 0.12rem;
  color: white;
  padding-left: 0.05rem;
}

.play {
  align-items: center;
  display: flex;
  position: absolute;
  top: 0.05rem;
  right: -0.1rem;
  width: 0.8rem;

}
</style>